<!--
 * @Author: zhuxiaohang
 * @Date: 2023-11-20 14:35:10
 * @LastEditors: zhuxiaohang
 * @LastEditTime: 2023-12-29 20:24:43
 * @Description: file content
 * @FilePath: \co-prosperity-adoption-admin\src\views\restaurant\restaurantManage\restaurantDialog.vue
-->
<template>
  <div class="divBox">
    <el-form ref="formValidate" :model="formValidate" label-width="170px" class="formValidate mt20">
      <el-form-item label="积分数：">
        {{ formValidate.integral }}

      </el-form-item>
      <el-form-item label="审核状态：">
        <span v-if="formValidate.isPass == 0">待审核</span>
        <span v-if="formValidate.isPass == 1">审核通过</span>
        <span v-if="formValidate.isPass == 2">审核不通过</span>
      </el-form-item>



      <el-form-item label="奖励对象：">
        {{ formValidate.name }}
      </el-form-item>
      <el-form-item label="积分事项：">
        {{ formValidate.optionName }}
      </el-form-item>
      <el-form-item label="事项说明：">
        {{ formValidate.reason }}
      </el-form-item>
      <el-form-item label="积分类型：">

        <span v-if="formValidate.type == 1">增加</span>
        <span v-if="formValidate.type == 2">扣减</span>
      </el-form-item>
      <el-form-item label="凭证：">
        <!-- {{ formValidate.file.length }}w -->
        <div class="acea-row">
          <div v-for="(item, index) in formValidate.file" :key="index" class="pictrue">

            <!-- <el-image style="width: 100px; height: 100px;" src="https://img6.bdstatic.com/img/image/public/helian.jpg"></el-image> -->
            <el-image style="width: 100px; height: 100px;margin-right: 10px;" :src="item"></el-image>

          </div>

        </div>
      </el-form-item>
      <el-form-item label="审核：" v-if="formValidate.isPass == 0" prop="status"
        :rules="{ required: true, message: '请审核', trigger: 'blur' }">

        <el-radio-group v-model="formValidate.status">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">不通过</el-radio>
        </el-radio-group>

      </el-form-item>


    </el-form>
    <div class="bt">

      <el-button style="width:100px" type="primary" v-if="formValidate.isPass == 0"
        @click="submitForm('formValidate')">提交</el-button>
      <el-button style="width:100px" type="primary" v-else @click="$emit('close')">关闭</el-button>
    </div>

  </div>
</template>

<script>
import { getAppInfo, getAppAudit, homeGetAdd, getmedalList } from '@/api/village'

// import { configInfo } from '@/api/systemConfig';
// import Tinymce from '@/components/Tinymce/index'
export default {
  // components: { Tinymce },
  props: {
    selectItem: {
      type: Object,
      default: () => { }
    },
    isCreate: {
      type: Number, //0-新增 1-编辑
    },
    categoryOptions: {
      type: Array
    }
  },
  watch: {},
  data() {
    return {
      medalList: [],
      medalId: [],
      modalMap: false,//地图弹窗
      keyUrl: undefined,
      time: undefined,//营业时间
      formValidate: {
        file: [],
        status: null,
        id: null,
        integral: null,
        isPass: null,
        name: null,
        optionName: null,
        reason: null,
        type: null,
      },
      dialogVisible: false
    }
  },
  created() {
    this.getKey()
    this.init()
  },
  mounted() {
    let list = []
    this.$refs['formValidate'].resetFields();
    if (this.selectItem) {
      let data = {
        id: this.selectItem.id
      }
      getAppInfo(data).then(res => {
        console.log(res, '围殴还是很')
        this.time = [res.openTime, res.closeTime]
        this.formValidate = {
          id: res.id,
          integral: res.integral,
          isPass: res.isPass,
          name: res.name,
          optionName: res.optionName,
          reason: res.reason,
          type: res.type,
          status: res.isPass,
          file: res.file

        }
        // .split(',')
      })

    }

    window.addEventListener('message', function (event) {
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      var loc = event.data;
      if (loc && loc.module === 'locationPicker') { // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        window.parent.selectAdderss(loc);
      }
    }, false);
    window.selectAdderss = this.selectAdderss;

  },
  methods: {
    init() {

      getmedalList().then(res => {
        this.medalList = res

      })
    },
    // key值
    getKey() {
      const _pram = { id: 74 };
      configInfo(_pram).then(async res => {
        let keys = res.tengxun_map_key;
        this.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`;
      })
    },

    // 时间选择
    handlerChangeTime(val) {
      if (val === 1) {
        this.formValidate.openTime = this.time[0]
        this.formValidate.closeTime = this.time[1]
      }
    },
    //查找位置
    onSearch() {
      this.modalMap = true;
    },

    //地图选择位置信息
    selectAdderss(val) {

      this.formValidate.homeAddress = val.poiaddress
      this.formValidate.latitude = val.latlng.lat
      this.formValidate.longitude = val.latlng.lng
      this.modalMap = false;
    },

    handleCheckedCitiesChange(val) {
      console.log(8989, val)
    },

    // 点击商品图
    modalPicTap(tit, num, i) {
      const _this = this
      this.$modalUpload(function (img) {
        if (tit === '2' && !num) {
          if (img.length > 1) return this.$message.warning('最多选择1张图片！')
          _this.formValidate.image = img[0].sattDir
        }
        if (tit === '3' && !num) {
          if (img.length > 10) return this.$message.warning('最多选择10张图片！')
          if (img.length + _this.formValidate.sliderImage.length > 10) return this.$message.warning('最多选择10张图片！')
          console.log(5555, _this.formValidate.sliderImage)
          img.map((item) => {
            _this.formValidate.sliderImage.push(item.sattDir)
          })
        }
      }, tit, 'content')
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item
    },
    handleDragEnd(e, item) {
      this.dragging = null
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move'
    },
    handleDragEnter(e, item, name) {
      e.dataTransfer.effectAllowed = 'move'
      if (item === this.dragging) {
        return
      }
      if (name === 3) {
        const newItems = [...this.formValidate.sliderImage]
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)
        newItems.splice(dst, 0, ...newItems.splice(src, 1))
        this.formValidate.sliderImage = newItems
      }
      // if (name === 2) {
      //   const newItems = [...this.formValidate.image]
      //   const src = newItems.indexOf(this.dragging)
      //   const dst = newItems.indexOf(item)
      //   newItems.splice(dst, 0, ...newItems.splice(src, 1))
      //   this.formValidate.image = newItems
      // }
    },

    // 删除图片
    handleRemove(i, name) {
      if (name === 2) {
        this.formValidate.image.splice(i, 1)
      }
      if (name === 3) {
        this.formValidate.sliderImage.splice(i, 1)
      }
    },

    // 保存提交
    submitForm() {

      if (this.isCreate === 1) {//编辑
        this.$refs.formValidate.validate(valid => {
          let data = {
            id: this.formValidate.id,
            isPass: this.formValidate.status,

          }

          if (this.formValidate.status == 0) {
            this.$message.error('请审核')
            return;
          }
          getAppAudit(data).then(res => {

            this.$message.success('提交成功')
            this.$emit('getList')
            this.$emit('close')
          })

        })
      }

    },

    //添加标签
    handlerAddTags() {
      this.formValidate.tags.push('')
    },
    //删除标签
    handlerDeleteTags(index) {
      this.formValidate.tags.splice(index, 1)
    },
  }
}
</script>

<style lang="scss" scoped>
.divBox {
  .title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .pictrue {
    // width: 60px;
    // height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;

    img {
      width: 100%;
      height: 100%;
      margin: 5px;
    }
  }

  .btndel {
    position: absolute;
    z-index: 1;
    width: 20px !important;
    height: 20px !important;
    left: 46px;
    top: -4px;
  }

  .bt {
    width: 80%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }

  .tags {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .tagsInner {
      width: 150px;
    }
  }
}
</style>
<style lang="scss">
.el-input-group__append,
.el-input-group__prepend {
  background-color: #1890ff !important;
  color: #fff !important;
  border-color: #1890ff !important;
  border-radius: 0 4px 4px 0;
}
</style>
